<!-- 登录页 -->
<template>
	<view class="login-form df fdc aic jcc">
		<image class="login-img" src="../../static/imgs/logo@2x.png"></image>
		<up-form>
			<up-form-item>
				<text class="mb20 mention-text">登录账号</text>
				<input @focus="ipt_focus" placeholder="请输入登录账号" class="login-form-ipt" type="text" />
			</up-form-item>
			<up-form-item>
				<text class="mb20 mention-text">登录密码</text>
				<view class="password-container">
					<input @focus="ipt_focus" placeholder="请输入登录密码" class="login-form-ipt" :type="password_type" value="" />
					<img @click="change_pwd_type" class="password-icon-size" :src="password_icon" alt="" />
				</view>
			</up-form-item>
			<up-form-item>
				<view class="mt40">
					<button @click="login" class="login-btn">立即登录</button>
				</view>
			</up-form-item>
			<up-form-item>
				<view class="df jcsb pl40 pr40">
					<text @click="show = true" class="mention-text">申请注册</text>
					<text @click="unlockAccount" class="mention-text">解锁账号</text>
					<text @click="reset_password" class="mention-text">重置密码</text>
				</view>
			</up-form-item>
		</up-form>
		<up-modal :content="content"
			:show="show"
			showCancelButton
			closeOnClickOverlay
			@confirm="confirm"
			@cancel="show = false"
			@close="show = false"  title="温馨提示"></up-modal>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'


	const password_type = ref('password')
	const password_icon = ref('../../static/imgs/closeeye.png')
	let flag = ref(true)
	const show = ref(false)
	const content = ref('注册账号需填写相应表单并提交审核，注册成功后将通过短信的形式告知，是否继续申请注册？')
	const login_form = ref({
		phone: '',
		password: ''
	})

	
	const confirm = ()=>{
		show.value = false
	}
	const change_pwd_type = ()=>{
		console.log(1111);
		flag.value = !flag.value
		if(flag){
			password_type.value = 'password'
			password_icon.value = '../../static/imgs/closeeye.png'
		}else{
			password_type.value = 'text'
			password_icon.value = '../../static/imgs/openeye.png'
		}
	}
	const reset_password = () => {
		uni.redirectTo({
			url: '/pages/resetPwd/resetPwd'
		})
	}
	const to_sign = () => {
		uni.redirectTo({

			url: '/pages/sign/sign'
		})
	}

	const login = () => {
		// if (!login_form.value.phone) {
		// 	uni.showToast({
		// 		icon: 'none',
		// 		title: '请输入手机号'
		// 	})
		// 	return
		// }
		// if (!login_form.value.password) {
		// 	uni.showToast({
		// 		icon: 'none',
		// 		title: '请输入密码'
		// 	})
		// 	return
		// }
		uni.switchTab({
			url:'/pages/home/home'
		})
	}
	
	const unlockAccount = ()=>{
		uni.redirectTo({
			url:'/pages/test/test'
		})
	}
</script>

<style lang="scss">
	.login-form {
		padding: 88rpx 48rpx;
	}

	.login-img {
		width: 200rpx;
		height: 200rpx;
	}

	.active {
		border-color: #2D6CE8 !important;
	}

	.login-form-ipt {
		border-bottom: 2rpx solid #F1F0F0;
		font-size: 24rpx;
		height: 80rpx;
		font-weight: 500;
		caret-color:#2D6CE8;
	}

	.mention-text {
		font-size: 24rpx;
		color: #AAB1B7;
		line-height: 50rpx;
	}
	.u-form{
		width: 100%;
		margin-top: 68rpx;
	}
	.password-container{
		position: relative;
	}
	.password-icon-size{
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: 0;
		top: 30%;
		z-index: 999;
	}
	.login-btn{
		font-size: 32rpx;
		color: #fff;
		background:linear-gradient(270deg,#58C2F7,#2D6CE8);
		border-radius: 36rpx;
		opacity: .5;
		margin-top: 120rpx;
	}
</style>